import React,{useState,useEffect} from 'react'
import axios from 'axios'
import { Table,Button, Modal, message} from 'antd';
export default function List() {

  const [list,setList]=useState([])
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [xxxx,setXxxx]=useState({})

  const columns = [
    {
      title: 'Name',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: 'Age',
      width: 100,
      dataIndex: 'age',
      key: 'age',
      fixed: 'left',
      sorter: true,
    },
    {
      title: 'Sex',
      dataIndex: 'sex',
      key: '1',
    },
    {
      title: 'County',
      dataIndex: 'county',
      key: '2',
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: '3',
    }, {
      title: 'Tel',
      dataIndex: 'tel',
      key: '4',
    },{
      title: 'Hoppy(球类)',
      dataIndex: 'hoppy',
      key: '5',
    },
    {
      title: 'Operation',
      key: 'operation',
      fixed: 'right',
      width: 230,
      render: (columns) => <div>
         {localStorage.getItem('role')==='adiam' ? (<div>
            <Button type="primary" onClick={()=>showModal(columns)}>查看</Button>
            <Button type="primary" onClick={()=>bj(columns)}>编辑</Button>
            <Button type="primary" danger onClick={()=>del(columns)} >删除</Button>
         </div>):('权限不足')}
      </div>,
    },
  ];
  const render=()=>{
    axios.get('/api/list').then((resq)=>{
      setList(resq.data.list)
    })
  }
  render()
  const bj=(columns)=>{
    console.log(columns)
    axios.post('/api/edit',columns).then((resp)=>{
      console.log(resp.data.msg)
      alert(resp.data.msg)
    })
  }

  const del=({id})=>{
    axios.get('/api/del',{params:{id}}).then((req,res)=>{
      if (req.data.code===200) {
        message.success(req.data.msg)
      }
    })
  }
  const showModal = (columns) => {
    setIsModalOpen(true);
    setXxxx(columns)
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <Modal title="查看详细信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>name:{xxxx.name}</p>
        <p>sex:{xxxx.sex}</p>
        <p>age:{xxxx.age}</p>
        <p>tel:{xxxx.tel}</p>
        <p>email:{xxxx.email}</p>
        <p>county:{xxxx.county}</p>
        <p>id:{xxxx.id}</p>
      </Modal>
      <Table
        columns={columns}
        dataSource={list}
        scroll={{
          x: 1300,
        }}
      />
    </div>
  )
}
